import React, { useEffect } from 'react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

const ThemeDebug: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  useEffect(() => {
    console.log('当前主题模式:', mode);
    console.log('主题配置:', theme);
  }, [mode, theme]);

  return (
    <div style={{
      position: 'fixed',
      bottom: 0,
      right: 0,
      background: 'rgba(0, 0, 0, 0.8)',
      color: 'white',
      padding: '10px',
      fontSize: '12px',
      zIndex: 9999,
      maxWidth: '300px'
    }}>
      <div>当前主题: {mode}</div>
      <div>布局背景: {theme.layoutBackground}</div>
      <div>内容背景: {theme.contentBackground}</div>
      <div>侧边栏背景: {theme.siderBackground}</div>
      <button 
        onClick={() => {
          localStorage.removeItem('theme-storage');
          window.location.reload();
        }}
        style={{
          marginTop: '5px',
          padding: '3px 8px',
          fontSize: '10px'
        }}
      >
        清除主题缓存
      </button>
    </div>
  );
};

export default ThemeDebug;